<template>
	<view class="page">
		<pageheader :setting="settingdata"></pageheader>
		<view class="stores">
			<navigator :url="'/home/station/stationInfo?other_uid='+ other_uid" hover-class="none" class="storeinfo">
				<view class="userimage">
					<image class="image" :src="shopInfo.image" mode="aspectFill"></image>
				</view>
				<view class="rightsinfo">
					<view class="namesbox">
						<text class="name">{{shopInfo.shop_name}}</text>
						<view class="flex_align">
							<view :class="index%2==0?'shiming':'rongyu'" v-for="(item,index) in shopInfo.attestation"
								:key="index">{{item}}</view>
							<image class="vipimg" v-if="shopInfo.membersign.image" :src="shopInfo.membersign.image"
								mode="heightFix"></image>
						</view>
					</view>
					<view class="truename">店主实名：{{shopInfo.shopkeeper_name}} <text>信誉值: {{shopInfo.credit_value}}</text>
					</view>
				</view>
			</navigator>
			<view class="dutys" v-if="!operate">主营业务：{{shopInfo.business?shopInfo.business:'这个店主有点懒，暂无主营业务~'}}</view>
			<navigator url="/home/station/editstation" hover-class="none" class="dutys" v-if="operate">
				主营业务：{{shopInfo.business?shopInfo.business:'这个店主有点懒，暂无主营业务~'}}
			</navigator>

			<view class="address" @click="openmap" v-if="shopInfo.address!=''">苗店地址：{{shopInfo.address}} <text
					class="icons icon-daohang"></text>
			</view>
			<view class="countsbox">
				<view class="countone">
					<text>{{shopInfo.view_num || 0}}</text>
					<text class="countonetext">浏览量</text>
				</view>
				<navigator url="/chat/metionme?type=1" hover-class="none" class="countone" v-if="operate">
					<text>{{shopInfo.fans_num || 0}}</text>
					<text class="countonetext">粉丝量</text>
				</navigator>
				<view class="countone" v-if="!operate">
					<text>{{shopInfo.fans_num || 0}}</text>
					<text class="countonetext">粉丝量</text>
				</view>

				<view class="countone">
					<text>{{shopInfo.history_contact || 0}}</text>
					<text class="countonetext">历史联系</text>
				</view>
				<view class="countone" v-if="shopInfo.dobusiness_day!='0天'">
					<text>{{shopInfo.dobusiness_day || 0}}</text>
					<text class="countonetext">营业天数</text>
				</view>
			</view>
			<view class="mainpage">
				<view class="tabs">
					<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" bar-height="4"
						bar-width="60" active-color="#38bd8c" inactive-color="#000000" font-size="32"
						bg-color="transparent"></u-tabs>
				</view>
				<!-- 供应货品 -->
				<block v-if="current == 0">
					<view class="tabsclassify" v-if="allcate">
						<view class="classifyone" :class="cateindex==index?'opt':''" v-for="(item,index) in shopscate"
							:key="index" @click="setcate(index)" v-if="index<14">{{item.name}}</view>
					</view>
					<view class="tabsclassify" v-if="!allcate">
						<view class="classifyone" :class="cateindex==index?'opt':''" v-for="(item,index) in shopscate"
							:key="index" @click="setcate(index)">{{item.name}}</view>
					</view>

					<view style="text-align: center;" @click="showcate" v-if="shopscate.length>14">{{allcate?'﹀':'︿'}}
					</view>
					<view class="shopscontents">
						<block v-for="(item,index) in classifydata" :key="index">
							<navigator :url="'/home/index/supplydetail?id='+item.id" hover-class="none"
								class="shopsone">
								<image class="shopimg" :src="item.image" mode="aspectFill"></image>
								<view class="namebox">
									<image class="vipimg" v-if="item.mimage" :src="item.mimage" mode="heightFix">
									</image>
									<view class="xinyu" v-if="item.credit_value">信 <text
											class="number">{{item.credit_value}}</text></view>
									<view class="shim" v-if="item.realname">{{item.realname}}</view>
									<view class="yu" v-if="item.Enterprise">{{item.Enterprise}}</view>
								</view>
								<view class="shopname clamp1">{{item.title}}</view>

								<view class="pricebox">
									<!-- <view class="price">￥{{item.money}}/{{item.unit}}</view> -->
									<view class="price">
										<block v-if="item.money != '0.00'">￥{{item.money}}/{{item.unit}}</block>
										<text class="tel" v-else>电话询价</text>
									</view>
									<text>{{item.view}}人查看</text>
								</view>
								<view class="locations">{{item.city}}</view>
							</navigator>
						</block>
						<view class="not_more" v-if="classifydata.length<1">
							<image src="../../static/img/wdingdan.png" mode="widthFix"></image>
							<view class="text">暂无货品</view>
						</view>
						<view class="nomore" v-if="nomore&&classifydata.length>0">—— · 没有更多了 · ——</view>
					</view>
				</block>
				<!-- 头条动态 -->
				<block v-if="current == 1">
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scroll="scroll"
						:style="'height:'+windowHeight+'px'">

						<view class="shopscontents" style="background-color: #fff;">
							<block v-for="(item,index) in mydynamic" :key="index">
								<view class="onenews">
									<image :src="item.avatar" mode="aspectFill" class="imghead"></image>
									<view class="newsinfo">
										<view class="namedes" @click="todetail(item.id,item.senduid)">
											<text>{{item.nickname}}</text>
											<image :src="item.mimage" v-if="item.mimage" mode="heightFix"></image>
											<view class="xinyong_box">
												<view class="xin">信</view>
												<view class="xin_number">{{item.credit_value}}</view>
												<view class="shiming" v-if="item.realname">实</view>
												<view class="qiye" v-if="item.enterprise">企</view>
											</view>
										</view>
										<view class="times" @click="todetail(item.id,item.senduid)">
											<text>{{item.createtime}}</text>
											<text class="add">{{item.city}}</text>
										</view>
										<view class="newscontent" v-if="item.content"
											@click="todetail(item.id,item.senduid)">{{item.content}}
										</view>

										<view class="" style="height: 360rpx;" v-if="item.type==2"
											@click="todetail(item.id,item.senduid)">
											<!-- @click="lookvideo(item)" -->
											<view class="videos blackbord" v-if="item.lookimg">
												点击加载视频...
											</view>
											<video v-if="item.state" :src="item.video[0]" controls class="videos"
												direction="90"></video>
										</view>

										<!-- <video v-if="item.type==2" :src="item.video[0]" controls class="videos"></video> -->
										<view v-if="item.type==1" class="photobox">
											<u-row gutter="12">
												<u-col span="4" v-for="(item2,index2) in item.images" :key="index2">
													<image :src="item2" @click="$plug.showImg(item.images,item2)"
														mode="aspectFill"></image>
												</u-col>
											</u-row>
										</view>
										<view class="friendseach" @click="todetail(item.id,item.senduid)">
											<view class="eachone">
												<u-icon name="eye-fill" color="#666666" size="32"></u-icon>
												<text>{{item.view}}</text>
											</view>
											<view class="eachone">
												<u-icon name="thumb-up-fill" :color="item.is_dz?'#FE524B':'#666666'"
													size="32"></u-icon>
												<text>{{item.dz_num}}</text>
											</view>
											<view class="eachone">
												<u-icon name="chat-fill" color="#666666" size="32"></u-icon>
												<text>{{item.pl_num}}</text>
											</view>
											<view class="eachone">
												<u-icon name="zhuanfa" color="#666666" size="32"></u-icon>
												<text>分享</text>
											</view>
										</view>
									</view>

									<view class="" style="position: relative;" v-if="operate">
										<u-icon name="more-dot-fill" color="#3D3F43" size="32"
											@click="showopera(index)"></u-icon>

										<view class="opera" v-if="item.ischeck">
											<view class="edit" @click="toedit(item.id)">编辑</view>
											<view class="del" @click="deletedy(item.id)">删除</view>
										</view>
									</view>
								</view>
							</block>
							<view class="nomore" v-if="nomore">—— · 没有更多了 · ——</view>
						</view>

					</scroll-view>
				</block>
				<!-- 苗店实力 -->
				<block v-if="current == 2">
					<view class="shopscontents" style="background-color: #fff;">
						<view class="shopstrueone">
							<text class="title">实力简介</text>
							<view class="shopvalue">{{storestrength.describe}}</view>
						</view>
						<view class="shopstrueone">
							<text class="title">主营范围</text>
							<view class="shopvalue">{{storestrength.business}}</view>
							<view class="shopimgbox">
								<block v-for="(item,index) in storestrength.main_images" :key="index">
									<image :src="item" @click="$plug.showImg(storestrength.main_images,item)"
										mode="aspectFill"></image>
								</block>
							</view>
						</view>
						<view class="shopstrueone">
							<text class="title">企业资质</text>
							<view class="shopimgbox">
								<block v-for="(item,index) in storestrength.enterprise_images" :key="index">
									<image :src="item" @click="$plug.showImg(storestrength.enterprise_images,item)"
										mode="aspectFill"></image>
								</block>
							</view>
						</view>
					</view>
				</block>
			</view>
			<view class="bottoms" v-if="operate&&shopInfo.shop_name">
				<view class="sharestation" @click="share">分享苗店</view>
				<navigator url="/home/oracle/managecenter" hover-class="none" class="managecenter">认证管理</navigator>
				
				<navigator url="/home/station/editstation" hover-class="none" class="editstation">编辑苗店</navigator>
			</view>
			<view class="bottoms" v-if="!operate&&shopInfo.shop_name">
				<view class="tousu" @click="plaint">投诉</view>
				<view class="add" @click="attention">{{shopInfo.is_follow==1?'已关注':'关注店主'}}</view>
				<view class="chat" @click="chat" v-if="chat_type==0">聊一聊</view>
				<view class="contact" @click="dialing">联系店家</view>
			</view>
		</view>
		<view class="perch"></view>
	</view>
</template>

<script>
	var _this, $paginator;
	export default {
		data() {
			return {
				settingdata: {
					name: ' 我的苗店',
					bgColor: '#35BF8D',
					titleColor: '#fff',
					showNav: true,
					showTypes: 0,
					position: "stationpage"
				},
				navH: 0,
				list: [{
					name: '供应货品'
				}, {
					name: '头条动态'
				}, {
					name: '苗店实力'
				}],
				current: 0,
				classifydata: [],
				// 二级分类列表
				shopscate: [],
				// 选中的二级分类下标
				cateindex: 0,
				//店铺信息
				shopInfo: {
					membersign: {}
				},
				//是否到底
				nomore: false,
				// 我的动态列表
				mydynamic: [],
				// 苗店实力
				storestrength: {},
				//是否显示苗店名称
				//是否可以操作苗店
				operate: false,
				// 查看人员的苗店id
				other_uid: "",
				chat_type: 0, //下方聊一聊按钮的隐藏

				windowHeight: 0,
				scrollTop: 0,
				id: uni.getStorageSync("client_uid"),
				allcate: true
			}
		},
		onLoad(options) {
			console.log(options)
			_this = this
			var deviceInfo = uni.getSystemInfoSync();
			_this.windowHeight = deviceInfo.safeArea.height - 45
			console.log(options)

			// if (options.operate) {
			// 	_this.operate = true
			// }
			if (options.id) {
				_this.other_uid = options.id
			}
			if (options.chat_type) {
				_this.chat_type = 1
			}
			if (options.showTypes == 1) {
				wx.setStorageSync("share", false)
				_this.settingdata.showTypes = 1
			}
			_this.getmessage()
			console.log(_this.settingdata.showTypes, 'showTypes', wx.getStorageSync("share"))
		},
		onShow() {
			// 登录完成后刷新本页面
			if (uni.getStorageSync("refresh") == 1 || !uni.getStorageSync("refresh")) {
				uni.setStorageSync("refresh", "2")
				_this.getmessage()
			}

			if (_this.isonshow) {
				$paginator = new _this.$paginator(_this.$api)
				_this.getdynamic(true)
				_this.isonshow = false
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			_this.getmessage()
			if (_this.current == 0 && _this.shopscate.length > 0) {
				$paginator = new _this.$paginator(_this.$api)
				_this.getShop(true, _this.shopscate[_this.cateindex]?.id)
			}
			if (_this.current == 1) {
				$paginator = new _this.$paginator(_this.$api)
				_this.getdynamic(true)
			}
			if (_this.current == 2) {
				_this.getstorestrength()
			}
		},
		onReachBottom: function() {
			if (_this.current == 0) {
				$paginator.nextPager(() => {
					_this.getShop(false, _this.shopscate[_this.cateindex]?.id)
				})
			}
			if (_this.current == 1) {
				$paginator.nextPager(() => {
					_this.getdynamic()
				})
			}
		},
		methods: {
			//内层刷新这层
			isonshow() {
				_this.getmessage()
				if (_this.current == 0 && _this.shopscate.length > 0) {
					$paginator = new _this.$paginator(_this.$api)
					_this.getShop(true, _this.shopscate[_this.cateindex]?.id)
				}
				if (_this.current == 1) {
					$paginator = new _this.$paginator(_this.$api)
					_this.getdynamic(true)
				}
				if (_this.current == 2) {
					_this.getstorestrength()
				}
			},
			change(index) {
				_this.current = index;
				// 切换供应货品
				if (index == 0) {
					$paginator = new _this.$paginator(_this.$api)
					_this.getShop(true, _this.shopscate[_this.cateindex]?.id)
				}
				// 显示头条冬天
				if (index == 1) {
					$paginator = new _this.$paginator(_this.$api)
					_this.getdynamic(true)
				}
				if (index == 2) {
					if (!_this.storestrength.id) {
						_this.getstorestrength()
					}
				}
			},
			// 获取苗店信息
			getmessage() {
				let join = {}
				if (_this.other_uid) {
					join.other_uid = _this.other_uid
				}
				_this.$api.get("myshop", join).then(data => {
					_this.shopInfo = data
					// _this.settingdata.name = data.shop_name
					if (data.client_uid == (uni.getStorageSync("client_uid") ? uni.getStorageSync("client_uid") :
							0)) {
						_this.operate = true
						_this.getdata(true)
					} else {
						_this.operate = false
						_this.getdata(false)
					}
				});
			},
			//供应货品-- 获取我的苗店供应货品二级分类
			getdata(e) {
				let shop_id
				if (e) {
					shop_id = ''
				} else {
					shop_id = _this.shopInfo.id
				}
				_this.$api.get("getshopcatelist", {
					shop_id
				}).then(data => {
					
					if (data && data.length > 0) {
						let allscate = [{
							id: 0,
							name: "全部"
						}]
						_this.shopscate = [...allscate, ...data]
					}
					$paginator = new _this.$paginator(_this.$api)
					 _this.getShop(true, _this.shopscate[_this.cateindex]?.id)
					
					// if (data && data.length > 0) {
					// 	let allscate = [{
					// 		id: 0,
					// 		name: "全部"
					// 	}]
					// 	_this.shopscate = [...allscate, ...data]
					// 	$paginator = new _this.$paginator(_this.$api)
					// 	_this.getShop(true, _this.shopscate[_this.cateindex]?.id)
					// } else {
					// 	_this.current = 1
					// 	$paginator = new _this.$paginator(_this.$api)
					// 	_this.getdynamic(true)
					// }
				});
			},
			//供应货品-- 根据分类获取商品
			getShop: function(firstLoad = false, cate_id) {
				let join = {}
				if (_this.other_uid) {
					join.other_uid = _this.other_uid
				}
				join.other_cate_id = cate_id || 0
				$paginator.getData('getshopgoods', join, (data) => {
					if (firstLoad) {
						_this.classifydata = data.list ? data.list : []
					} else {
						_this.classifydata = _this.classifydata.concat(data.list)
					}
					_this.nomore = data.nomore
				})
			},
			//供应货品-- 设置分类
			setcate(index) {
				_this.cateindex = index
				$paginator = new _this.$paginator(_this.$api)
				_this.getShop(true, _this.shopscate[index]?.id)
			},
			todetail: function(id, senduid) {
				uni.navigateTo({
					url: "/home/station/newsdetail?id=" + id + "&senduid=" + senduid
				})
			},
			// 头条动态-- 获取列表
			getdynamic: function(firstLoad = false) {
				let join = {}
				if (_this.other_uid) {
					join.other_uid = _this.other_uid
				}
				$paginator.getData('mydynamic', join, (data) => {
					console.log(data)
					data.list.forEach((item, index) => {
						item.state = false
						item.lookimg = true
						item.ischeck = false
					});
					if (firstLoad) {
						_this.mydynamic = data.list ? data.list : []
					} else {
						_this.mydynamic = _this.mydynamic.concat(data.list)
					}
					_this.nomore = data.nomore
				})
			},

			scroll: function(e) {
				console.log(e)
				_this.mydynamic.forEach((item, index) => {
					item.state = false
					item.lookimg = true
				});
			},
			// 点击播放视频
			lookvideo(item) {
				console.log(item)
				item.state = true
				item.lookimg = false
			},


			//苗店实力
			getstorestrength() {
				let join = {}
				if (_this.other_uid) {
					join.other_uid = _this.other_uid
				}
				_this.$api.get("storestrength", join).then(data => {
					_this.storestrength = data
				});
			},
			// 投诉
			plaint() {
				_this.$api.islogin(function() {
					uni.navigateTo({
						url: "/personal/complaint?source=1&type=1&shopname=" + _this.shopInfo.shop_name +
							"&keepername=" + _this.shopInfo.shopkeeper_name + "&type_id=" + _this.shopInfo
							.client_uid + "&shopimg=" + _this.shopInfo.image
					})
				})
			},
			//拨号并记录
			dialing() {
				_this.$api.islogin(function() {
					_this.$api.post("calllog", {
						calllog_uid: _this.other_uid,
						call_type: 3
					}).then(data => {
						_this.$plug.dialing(_this.shopInfo.mobile)
					});
				})
			},
			// 关注
			attention() {
				_this.$api.islogin(() => {
					_this.$api.get("savefollow", {
						select_type: 1,
						id: _this.shopInfo.client_uid,
						types: 3
					}).then(data => {
						_this.shopInfo.is_follow = _this.shopInfo.is_follow == 0 ? 1 : 0

						//如果点击了关注,刷新上个页面的关注信息
						wx.setStorageSync('index_onShow', true)
					});
				})
			},
			showcate() {
				_this.allcate = !_this.allcate
			},
			openmap() {
				console.log(_this.shopInfo)
				uni.openLocation({
					latitude: Number(_this.shopInfo.lat),
					longitude: Number(_this.shopInfo.lon),
					name: _this.shopInfo.shop_name,
					address: _this.shopInfo.address,
					success: function() {
						console.log('success');
					}
				});
			},

			showopera(index) {
				let arr = [..._this.mydynamic]
				// for (let i = 0; i < arr.length; i++) {
				// 	console.log(arr[i], '11');
				// }
				arr[index].ischeck = !arr[index].ischeck
				_this.mydynamic = arr
				console.log(_this.mydynamic, index)
			},

			toedit(id) {
				console.log(id)
				uni.navigateTo({
					url: '/home/submit/submit?id=' + id
				})
			},
			// 删除头条
			deletedy(id) {
				uni.showModal({
					title: '提示',
					content: '删除后所有评论都会被删除',
					success: function(res) {
						if (res.confirm) {
							_this.$api.get("delcontent", {
								id: id,
								client_uid: uni.getStorageSync("client_uid") ? uni.getStorageSync(
									"client_uid") : 0
							}).then(data => {
								$paginator = new _this.$paginator(_this.$api)
								_this.getdynamic(true)
							});
						}
					}
				});
			},
			// 跳转到聊天
			chat() {
				// console.log(this.shopInfo)
				let list = {}
				list = {
					to_id: this.shopInfo.client_uid,
					from_id: wx.getStorageSync('client_uid'),
					name: this.shopInfo.shop_name,
				}
				console.log(list)
				wx.setStorageSync('list', list)

				uni.navigateTo({
					url: '../../chat/chatingroom?type=2' + '&member_type=1'
				})
			},

			share() {
				console.log(1111111, uni.getStorageSync("client_uid"))
				uni.share({
					provider: 'weixin',
					scene: "WXSceneSession", //分享到聊天界面
					type: 5,
					imageUrl: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/962fc340-4f2c-11eb-bdc1-8bd33eb6adaa.png',
					title: '祥运园林app分享',
					miniProgram: {
						id: 'gh_57154cd1b0ae', //微信小程序原始id
						path: "/home/station/stationpage?id=" + _this.id, //点击链接进入的页面
						type: 2, //微信小程序版本类型，可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。
						webUrl: '/pages/index/index' //兼容低版本的网页链接
					},
					success: res => {
						console.log(JSON.stringify(res));
					}
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.stores {
		background-color: #35BF8D;
		display: flex;
		flex-direction: column;
		width: 100%;

		.storeinfo {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 0 26rpx;
			margin-top: 50rpx;

			.userimage {
				width: 114rpx;
				height: 114rpx;
				border-radius: 50%;
				overflow: hidden;
				display: inline-table;

				image {
					width: 114rpx;
					height: 114rpx;
					border-radius: 50%;
				}
			}

			.rightsinfo {
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;

				.namesbox {
					display: flex;
					flex-direction: row;
					align-items: center;
					flex-wrap: wrap;

					.name {
						color: #fff;
						font-size: 36rpx;
						font-weight: bold;
						// flex: 1;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}

					.vipimg {
						height: 36rpx;
						margin-left: 30rpx;
					}

					// .shiming {
					// 	margin-left: 30rpx;
					// 	width: 76rpx;
					// 	height: 52rpx;
					// 	border-radius: 8rpx;
					// 	text-align: center;
					// 	line-height: 52rpx;
					// 	background: linear-gradient(92deg, #fcdb56 4%, #ffca6b 95%);
					// 	color: #ff9c00;
					// 	font-size: 24rpx;
					// 	font-weight: bold;
					// }

					.rongyu {
						width: 30rpx;
						height: 30rpx;
						border-radius: 3rpx;
						background: linear-gradient(90deg, #f6dcc2, #e6bc97);
						text-align: center;
						line-height: 30rpx;
						color: #9e6430;
						font-size: 20rpx;
						margin-left: 12rpx;
					}
				}

				.truename {
					margin-top: 10rpx;
					color: #fff;
					font-size: 24rpx;

					text {
						margin-left: 20rpx;
						background-color: #FFFFFF;
						color: #35BF8D;
						padding: 0 10rpx;
						line-height: 30rpx;
						border-radius: 28rpx;
					}
				}
			}
		}

		.dutys {
			margin-top: 17rpx;
			color: #fff;
			font-size: 24rpx;
			padding: 0 26rpx;
		}

		.address {
			margin-top: 10rpx;
			color: #fff;
			font-size: 24rpx;
			padding: 0 26rpx;

			.icons {
				font-size: 30rpx;
				margin-left: 15rpx;
			}
		}

		.countsbox {
			margin: 34rpx 26rpx 28rpx 26rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			.countone {
				display: flex;
				flex-direction: column;
				align-items: center;

				text {
					color: #fff;
					font-size: 32rpx;
					font-weight: bold;
				}

				.countonetext {
					font-size: 20rpx;
					font-weight: normal;
				}
			}
		}

		.mainpage {
			flex: 1;
			width: 100%;
			border-radius: 0 70rpx 0 0;
			background-color: #fff;
			display: flex;
			flex-direction: column;

			.tabs {
				margin-top: 20rpx;
			}

			.tabsclassify {
				padding: 12rpx 26rpx;
				display: flex;
				flex-wrap: wrap;

				.classifyone {
					color: #000000;
					font-size: 28rpx;
					padding: 10rpx 25rpx;
					border: 1px solid #DBDBDB;
					margin: 0 15rpx 15rpx 0;

					&.opt {
						color: #38bd8c;
						font-weight: bold;
					}
				}
			}

			.shopscontents {
				flex: 1;
				background-color: #F6F6F6;
				display: flex;
				padding: 0 26rpx;
				flex-direction: row;
				flex-wrap: wrap;
				padding-bottom: 24rpx;
				justify-content: space-between;
				overflow-y: auto;

				.shopsone {
					width: 340rpx;
					height: 498rpx;
					padding-bottom: 12rpx;
					display: flex;
					flex-direction: column;
					background-color: #fff;
					border-radius: 16rpx;
					margin-top: 24rpx;

					.shopsone {
						width: 340rpx;
						height: 340rpx;
						border-radius: 10rpx;
					}

					.shopname {
						padding: 1rpx 12rpx 10rpx;
					}
				}

				.namebox {
					padding: 10rpx 12rpx 5rpx 12rpx;
					display: flex;
					flex-direction: row;
					align-items: center;

					.vipimg {
						margin-right: 4rpx;
						height: 36rpx;
						max-width: 150rpx;
					}

					.xinyu {
						line-height: 32rpx;
						height: 36rpx;
						background-color: #00C676;
						padding: 2rpx 2rpx 2rpx 6rpx;
						color: #FFFFFF;
						font-size: 22rpx;
						border-radius: 5rpx;
						margin-right: 4rpx;

						.number {
							background-color: #FFFFFF;
							width: 60rpx;
							line-height: 34rpx;
							color: #00C676;
							height: 32rpx;
							display: inline-block;
							margin-left: 6rpx;
							text-align: center;
							border-radius: 5rpx;
						}
					}

					.shim {
						padding: 0 6rpx;
						height: 36rpx;
						background: #ffbc53;
						border-radius: 6rpx;
						color: #fff;
						font-size: 20rpx;
						line-height: 36rpx;
						margin-right: 4rpx;
						text-align: center;
					}

					.yu {
						padding: 0 6rpx;
						height: 36rpx;
						background: #86cfff;
						border-radius: 6rpx;
						color: #fff;
						font-size: 20rpx;
						line-height: 36rpx;
						text-align: center;
						margin-right: 4rpx;
					}
				}

				.pricebox {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					padding: 0 12rpx;

					.price {
						color: #ff001f;
						font-size: 28rpx;
						font-weight: bold;
					}
					
					.tel {
						color: #ff001f;
						font-size: 24rpx;
						font-weight: normal;
					}

					text {
						color: #666666;
						font-size: 20rpx;
					}
				}

				.locations {
					margin-top: 10rpx;
					color: #666666;
					font-size: 20rpx;
					padding: 0 12rpx;
				}
			}

			.onenews {
				width: 656rpx;
				display: flex;
				flex-direction: row;
				margin-top: 20rpx;

				.imghead {
					width: 92rpx;
					height: 92rpx;
					border-radius: 50%;
				}

				.newsinfo {
					display: flex;
					flex-direction: column;
					flex: 1;
					margin-left: 30rpx;

					.namedes {
						display: flex;
						flex-direction: row;
						align-items: flex-end;

						text {
							color: #333333;
							font-size: 32rpx;
						}

						image {
							height: 36rpx;
							max-width: 120rpx;
							margin-left: 12rpx;
						}

						.xinyong_box {
							display: flex;
							flex-direction: row;
							align-items: center;
							margin-left: 8rpx;

							.xin {
								width: 30rpx;
								height: 30rpx;
								background: #00C575;
								border-radius: 3px 0 0 3rpx;
								text-align: center;
								line-height: 30rpx;
								color: #fff;
								font-size: 20rpx;
							}

							.xin_number {
								background-color: #fff;
								border: 2rpx solid #00C575;
								border-radius: 0 3rpx 3rpx 0;
								color: #00C575;
								font-size: 20rpx;
								text-align: center;
								height: 30rpx;
								line-height: 30rpx;
								min-width: 46rpx;
							}
						}
					}

					.times {
						margin-top: 20rpx;
						display: flex;
						flex-direction: row;
						align-items: center;

						text {
							color: #666666;
							font-size: 20rpx;
						}

						.add {
							margin-left: 30rpx;
						}
					}

					.newscontent {
						margin-top: 20rpx;
						color: #333333;
						font-size: 28rpx;
						font-weight: bold;
					}

					.photobox {
						margin-top: 30rpx;

						image {
							width: 159rpx;
							height: 159rpx;
							border-radius: 5rpx;
						}
					}

					.videos {
						margin-top: 30rpx;
						width: 100%;
						height: 340rpx;
					}

					.blackbord {
						background: #000000;
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 36rpx;
					}

					.friendseach {
						padding: 30rpx 10rpx 10rpx 10rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;

						.eachone {
							display: flex;
							flex-direction: row;
							align-items: center;
							width: 25%;

							text {
								color: #666666;
								font-size: 24rpx;
								margin-left: 10rpx;
							}
						}
					}
				}

				.opera {
					position: absolute;
					right: 0;
					top: 45rpx;
					width: 176rpx;
					background: #eee;
					text-align: center;
					z-index: 1;
				}

				.opera .edit {
					padding: 24rpx 0;
				}

				.opera .del {
					padding: 24rpx 0;
				}

			}

			.shopstrueone {
				margin: 0 26rpx;
				padding: 42rpx 0 48rpx 0;
				border-bottom: 2rpx solid #f6f6f6;
				display: flex;
				flex-direction: column;
				width: 100%;

				.title {
					color: #000;
					font-size: 28rpx;
					font-weight: bold;
				}

				.shopvalue {
					margin-top: 34rpx;
					font-size: 24rpx;
				}

				.shopimgbox {
					margin-top: 28rpx;
					width: 100%;

					image {
						width: 200rpx;
						height: 200rpx;
						border-radius: 10rpx;
						margin-left: 10rpx;
						display: inline-block;
					}
				}
			}
		}

		.bottoms {
			height: 80rpx;
			height: calc(env(safe-area-inset-bottom) + 80rpx);
			padding-bottom: env(safe-area-inset-bottom);
			width: 100%;
			display: flex;
			flex-direction: row;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			z-index: 20;

			// justify-content: space-around;
			button::after {
				border: none
			}

			.sharestation {
				width: 100%;
				height: 100%;
				text-align: center;
				line-height: 80rpx;
				background: #e9e9e9;
				color: #000;
				font-size: 28rpx;
				font-weight: bold;
				border-radius: 0;
			}

			.editstation {
				background: #38bd8c;
				width: 100%;
				height: 100%;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
				font-size: 28rpx;
				font-weight: bold;
			}
			.managecenter {
				background: #ffb302;
				width: 100%;
				height: 100%;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
				font-size: 28rpx;
				font-weight: bold;
			}

			.tousu {
				flex: 1;
				height: 100%;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
				font-size: 28rpx;
				font-weight: bold;
				background-color: #d5d5d5;
			}

			.add {
				flex: 1;
				height: 100%;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
				font-size: 28rpx;
				font-weight: bold;
				background-color: #f7773f;
			}

			.chat {
				flex: 1;
				height: 100%;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
				font-size: 28rpx;
				font-weight: bold;
				background-color: #fed352;
			}

			.contact {
				flex: 1;
				height: 100%;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
				font-size: 28rpx;
				font-weight: bold;
				background-color: #4fc499;
			}
		}
	}

	.perch {
		height: calc(env(safe-area-inset-bottom) + 80rpx);
		display: inline-block;
		width: 100%;
	}
</style>
